<template>
	<view class="t-login">
		<view class="t-b">{{title}}</view>
		<form class="cl">
			<view class="t-a">
				<image src="/static/login/account.png"></image>
				<input v-model="form.username" placeholder="请输入账号" />
			</view>
			<view class="t-a">
				<image src="/static/login/password.png"></image>
				<input v-model="form.password" placeholder="请输入密码" type="password" />
				<!-- <view class="t-c"></view> -->
			</view>

			<view class="t-a">
				<image src="/static/login/code.png"></image>
				<!-- 使用flex布局让输入框和验证码图片在一行 -->
				<view class="t-code-wrapper">
					<input v-model="form.code" placeholder="请输入验证码" />
					<img :src="codeUrl" alt="验证码" @click="refreshCode" />
				</view>
			</view>

			<view class="reg">
				<text>没有账号?</text>
				<text @click="handleUserRegister" class="reg-text">立即注册</text>
			</view>

			<!-- <view class="t-d">未注册的手机号验证后将自动注册</view> -->
			<button form-type="submit" @click="login">立即登录</button>
		</form>

		<view class="t-f">登录即同意<text @click="showAgreement">用户协议</text></view>

		<!-- 遮罩层 -->
		<view v-if="showDialog" class="overlay" @click="closeAgreement"></view>


		<!-- 对话框 -->
		<view v-if="showDialog" class="dialog">
			<view class="dialog-content">
				<text class="dialog-title">用户协议</text>
				<scroll-view scroll-y="true" class="dialog-body">
					<text>{{ agreement }}</text>
				</scroll-view>
				<view class="dialog-footer">
					<button @click="closeAgreement" class="dialog-button">确认</button>
				</view>
			</view>
		</view>

		<view class="t-e cl">
			<view class="t-g">
				<image src="/static/login/weixin.png"></image>
				<view>微信</view>
			</view>
			<view class="t-g">
				<image src="/static/login/qq.png"></image>
				<view>QQ</view>
			</view>
		</view>
		<!-- <soure :url="url"></soure> -->
	</view>
</template>
<script>
	import {
		getCodeImg,
		login,
		getInfo
	} from '@/api/login/login.js'


	export default {
		data() {
			return {
				title: '欢迎回来',
				codeUrl: '',
				url: 'https://ext.dcloud.net.cn/plugin?id=3335',
				form: {
					username: '', // 用户输入的账号
					password: '', // 用户输入的密码
					code: '',
					uuid: ''
				},
				showDialog: false, // 控制对话框和遮罩层的显示与隐藏
				agreement: "一、特别提示\n欢迎您使用本应用（以下简称“本软件”）。在使用本软件及相关服务之前，请仔细阅读并充分理解本协议的内容。您对本软件的使用将视为您同意并接受本协议的所有内容。\n\n二、使用规则\n1. 合法使用\n用户承诺不得利用本软件从事任何违法、违规或侵害他人合法权益的行为，包括但不限于以下内容：\n- 发布、传播违反法律法规的信息；\n- 损害国家利益或公共利益；\n- 未经授权侵入计算机信息网络或传播恶意程序。\n\n2. 账户管理\n用户有责任妥善保管账户信息，因账户信息泄露导致的后果由用户自行承担。\n用户不得将账户转让或授权他人使用。\n\n3. 服务变更与中断\n本软件有权根据业务需求对服务内容进行调整或中断，但将尽力提前通知用户。\n\n三、用户权利与义务\n1. 用户有权根据本协议及相关规则使用本软件提供的服务。\n2. 用户应保证提交信息的真实性、准确性和完整性，如因虚假信息造成损失，后果由用户承担。\n\n四、免责声明\n1. 本软件在法律允许范围内对服务的稳定性、连续性不作任何保证。\n2. 因不可抗力或第三方原因导致的服务中断或数据丢失，本软件不承担责任。"


			}




		},
		onLoad() {
			this.getCode()
		},
		methods: {



			getCode() {
				getCodeImg()
					.then(res => {
						if (res.code === 200) {
							this.codeUrl = "data:image/gif;base64," + res.img;
							this.form.uuid = res.uuid;
						} else {
							uni.showToast({
								title: res.msg || '获取验证码失败',
								icon: 'none'
							});
						}
					})
					.catch(err => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
						console.error('请求失败:', err);
					});
			},


			// 登录
			login() {
				// 检查是否填写了账号和密码
				if (!this.form.username || !this.form.password) {
					return this.showToast('请输入账号和密码');
				}

				login(this.form)
					.then(this.handleLoginSuccess)
					.catch(err => this.handleRequestError('登录请求失败', err));
			},

			// 登录成功后的方法
			handleLoginSuccess(res) {
				if (res.code === 200) {
					this.showToast('登录成功', 'success');
					const token = `Bearer ${res.token}`;
					sessionStorage.setItem('token', token);

					// 获取用户信息
					getInfo()
						.then(res => {
							console.log(res); // 输出 res
							this.handleUserInfoSuccess(res); // 确保传递数据给下一个处理函数
						})
						.catch(err => this.handleRequestError('信息请求失败', err));

					// 登录成功后跳转到首页（或其他页面）
					uni.switchTab({
						url: '/pages/index/index'
					});
					console.log(this.$store.state.user);
				} else {
					this.showToast(res.msg || '获取用户信息失败');
				}
			},
			// 获取用户信息的方法
			handleUserInfoSuccess(response) {
				if (response.code === 200) {
					const {
						nickName,
						avatar,
						userId,
						url
					} = response.user;
					// 调用 Vuex 的 setUserInfo action
					this.$store.dispatch('user/setUserInfo', {
						userId,
						nickname: nickName,
						avatar,
						url
					});

					this.showToast('用户信息已成功加载');
				} else {
					this.showToast(response.msg || '信息获取失败');
				}
			},

			showToast(message, icon = 'none') {
				uni.showToast({
					title: message,
					icon
				});
			},

			handleRequestError(message, error) {
				this.showToast(message);
				console.error(message, error);
			},

			//更新验证码
			refreshCode() {
				this.getCode()
			},

			// 去注册
			handleUserRegister() {
				uni.navigateTo({
					url: '/pages/register/index'
				});
			},

			// 用户协议
			showAgreement() {
				this.showDialog = true;
			},
			// 关闭用户协议对话框
			closeAgreement() {
				this.showDialog = false;
			},

		}

	}
</script>
<style>
	.t-login {
		width: 600rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000
	}

	.t-login button {
		font-size: 28rpx;
		background: #000;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx
	}

	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f4f4f4;
		font-size: 28rpx;
		border-radius: 50rpx
	}

	.t-login .t-a {
		position: relative
	}

	.t-login .t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		border-right: 2rpx solid #dedede;
		padding-right: 20rpx
	}

	.t-login .t-b {
		text-align: center;
		font-size: 46rpx;
		color: #000;
		padding: 180rpx 0
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #000;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0
	}

	.t-login .t-g {
		float: left;
		width: 50%
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx
	}

	.t-login .t-f {
		text-align: center;
		margin: 80rpx 0 0 0;
		color: #666
	}

	.t-login .t-f text {
		margin-left: 8rpx;
		color: #999
	}

	.t-login .uni-input-placeholder {
		color: #000
	}

	.cl {
		zoom: 1
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20'
	}

	.t-code-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.t-code-wrapper input {
		width: 150px;
		height: 90rpx;
		line-height: 90rpx;
		background: #f4f4f4;
		border-radius: 50rpx;
		padding: 0 30rpx 0 120rpx;
		/* 增加左内边距，避免与图标重叠 */
		font-size: 28rpx;
		margin-right: 10rpx;
	}

	.t-code-wrapper img {
		width: 160rpx;
		height: 80rpx;
		cursor: pointer;
		border-radius: 8rpx;
		margin-top: -25px;
	}

	.t-a image {
		width: 160rpx;
		/* 增加宽度 */
		height: 80rpx;
		/* 增加高度 */
		cursor: pointer;
		border-radius: 8rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		border-right: 2rpx solid #dedede;
		padding-right: 20rpx;
		z-index: 1;
		/* 确保图标显示在输入框上层 */
	}

	.reg {
		margin-left: 100px;
		margin-bottom: 20px;
		font-size: 15px;
	}

	.reg-text {
		margin-left: 5px;
		cursor: pointer;
		/* 鼠标悬停时显示手指图标 */
		transition: color 0.3s;
		/* 添加颜色渐变效果 */
	}

	/* 鼠标悬停时的样式 */

	/* 	.reg-text:hover {
		color: turquoise;
	} */

	/* 遮罩层 */
	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99;
	}

	/* 对话框容器 */
	.dialog {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		max-width: 600rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
		z-index: 100;
	}

	/* 对话框内容 */
	.dialog-content {
		padding: 20rpx;
	}

	/* 对话框标题 */
	.dialog-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		text-align: center;
	}

	/* 对话框滚动区域 */
	/* 对话框滚动区域 */
	.dialog-body {
		max-height: 400rpx;
		/* 设置最大高度，超出部分可滚动 */
		overflow-y: auto;
		/* 确保滚动 */
		font-size: 28rpx;
		color: #333;
		padding: 16rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		/* 包含内边距 */
	}


	/* 对话框底部按钮 */
	.dialog-footer {
		margin-top: 20rpx;
		text-align: center;
	}

	.dialog-button {
		background-color: #007aff;
		color: #ffffff;
		border-radius: 8rpx;
		padding: 12rpx 20rpx;
		font-size: 28rpx;
		text-align: center;
		display: flex;
		/* 使用 Flex 布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}
</style>